<template>
  <div class="app-container">
    <el-backtop visibility-height="10"></el-backtop>
    <!--工具栏 -->
    <el-row :gutter="25">
      <el-col :span="25" :xs="24">
        <el-form :model="likeQuery" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="工作名称" prop="job_name">
            <el-input v-model="likeQuery.job_name" placeholder="请输入工作名称" clearable style="width: 200px"/>
          </el-form-item>
          <el-form-item label="薪资区间">
            <el-input v-model="likeQuery.job_price_up" placeholder="请输入区间下限" clearable style="width: 140px"/>
            &nbsp;-&nbsp;
            <el-input v-model="likeQuery.job_price_down" placeholder="请输入区间上限" clearable style="width: 140px"/>
          </el-form-item>
          <el-form-item label="工作地点" prop="job_address">
            <el-input v-model="likeQuery.job_address" placeholder="请输入工作地点" clearable style="width: 200px"/>
          </el-form-item>
          <el-form-item label="教育程度" prop="job_education">
            <el-select v-model="likeQuery.job_education" clearable placeholder="请选择">
              <el-option v-for="item in degreeOptions" :key="item.value" :label="item.label"
                         :value="item.value" style="width: 220px"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工作类型" prop="job_type">
            <el-select v-model="likeQuery.job_type" clearable placeholder="请选择">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"
                         style="width: 220px"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工作状态" prop="job_status">
            <el-select v-model="likeQuery.job_status" clearable placeholder="请选择">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                         :value="item.value" style="width: 220px"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="公司名称" prop="company">
            <el-input v-model="likeQuery.company" placeholder="公司名称" clearable style="width: 200px"/>
          </el-form-item>
          <el-form-item label="创立时间" prop="start_time">
            <el-date-picker v-model="likeQuery.start_time" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading"
                       @click="handleQuery"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" :loading="loading" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!--工具栏2 -->
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini"
                   @click="dialogFormVisible = true"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
                   @click="openEditDialogFaction"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                   @click="handleDelete"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-message" size="mini" :disabled="multiple"
                   @click="handleDetails"
        >查看详情
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="careerList" @selection-change="handleSelectionChange"
              :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="岗位编号" align="center" key="id" prop="id" width="80"/>
<!--      <el-table-column label="岗位图片" align="center" key="job_image" prop="job_image">-->
<!--        <template slot-scope="scope">-->
<!--          <el-avatar :size="50" :src="'http://localhost:8888' + scope.row.job_image"></el-avatar>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="岗位名称" align="center" key="job_name" prop="job_name" width="170"/>
      <el-table-column label="岗位类型" align="center" key="job_type" prop="job_type"/>
      <el-table-column label="薪资情况" align="center" key="job_price" prop="job_price"/>
      <el-table-column label="学历要求" align="center" key="job_education" prop="job_education"/>
      <el-table-column label="岗位地址" align="center" key="job_address" prop="job_address"/>
      <el-table-column label="联系人" align="center" key="principal" prop="principal"/>
      <el-table-column label="联系电话" align="center" key="phone" prop="phone" width="110"/>
      <el-table-column label="公司名" align="center" key="company" prop="company" width="170"/>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-reading"
                     @click="handleDetails(scope.row.id)"
          >详情
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit"
                     @click="openEditDialogFaction(scope.row.id)"
          >修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete"
                     @click="handleDelete(event, scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pageRow">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="likeQuery.currentPage" :page-sizes="[12, 24, 30, 50]" :page-size="likeQuery.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="careerTotal"
      >
      </el-pagination>
    </div>

    <el-dialog title="新增岗位" :visible.sync="dialogFormVisible" :before-close="handleClose" append-to-body
               width="600px"
    >
      <el-form ref="form" :model="saveDialog" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位名称" prop="job_name">
              <el-input v-model="saveDialog.job_name" placeholder="请输入岗位名称" maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位薪资" prop="job_price">
              <el-input v-model="saveDialog.job_price" placeholder="请输入岗位薪资" maxlength="15"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位地址" prop="job_address">
<!--              <el-input v-model="saveDialog.job_address" placeholder="请输入岗位城市(如:杭州市)" maxlength="20"/>-->
              <el-cascader
                v-model="saveDialog.job_address"
                placeholder="选择公司地址"
                :options="countryVersion2"
                filterable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位类型" prop="job_type">
              <el-select v-model="saveDialog.job_type" placeholder="请选择岗位类型" clearable>
                <el-option label="全职" value="全职"></el-option>
                <el-option label="兼职" value="兼职"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学历要求" prop="job_education">
              <el-select v-model="saveDialog.job_education" placeholder="请选择学历要求" clearable>
                <el-option v-for="education in degreeOptions" :key="education.label"
                           :label="education.label" :value="education.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招聘状态" prop="job_status">
              <el-select v-model="saveDialog.job_status" placeholder="请选择招聘状态" clearable>
                <el-option label="招聘中" value="招聘中"></el-option>
                <el-option label="停止招聘" value="停止招聘"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经验要求" prop="job_experience">
              <el-select v-model="saveDialog.job_experience" clearable>
                <el-option v-for="experience in experienceOptions" :value="experience.value" :label="experience.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位福利" prop="job_welfare">
              <el-input type="textarea" v-model="saveDialog.job_welfare" resize="none"
                        :autosize="{ minRows: 3, maxRows: 3 }" maxlength="100" show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位描述" prop="job_description">
              <el-input type="textarea" v-model="saveDialog.job_description" resize="none"
                        :autosize="{ minRows: 5, maxRows: 5 }" maxlength="255" show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位责任" prop="job_responsibility">
              <el-input type="textarea" v-model="saveDialog.job_responsibility" resize="none"
                        :autosize="{ minRows: 5, maxRows: 5 }" maxlength="255" show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="附属公司" prop="companyId">
              <el-select v-model="saveDialog.companyId" filterable placeholder="请选择" clearable
                         @change="blurSelect"
              >
                <el-option v-for="company in companyList" :key="company.id" :label="company.company"
                           :value="company.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-button type="info" plain icon="el-icon-message" @click="handleCheck"
                         :disabled="companyInformationDialogVisible"
              >查看公司信息
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
        <el-button type="primary" @click="handleContinueSave">保存并继续添加</el-button>
      </div>
      <el-dialog width="590px" title="公司信息" :visible.sync="innerVisible" append-to-body :before-close="innerClose">
        <el-descriptions direction="vertical" :column="4" border v-loading="innerLoading">
          <el-descriptions-item label="公司名">{{ companyInfo.company }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ companyInfo.principal }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ companyInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="联系邮箱">{{ companyInfo.email }}</el-descriptions-item>
          <el-descriptions-item label="公司规模">{{ companyInfo.scale }}</el-descriptions-item>
          <el-descriptions-item label="入驻时间">{{ companyInfo.start_time }}</el-descriptions-item>
          <el-descriptions-item label="联系地址">{{ companyInfo.address }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </el-dialog>

    <el-dialog title="编辑岗位" :visible.sync="editDialogFormVisible" :before-close="handleEditDialogClose"
               append-to-body
               width="600px"
    >
      <el-form ref="editForm" :model="saveDialog" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位名称" prop="job_name">
              <el-input v-model="saveDialog.job_name" placeholder="请输入岗位名称" maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位薪资" prop="job_price">
              <el-input v-model="saveDialog.job_price" placeholder="请输入岗位薪资" maxlength="15"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位地址" prop="job_address">
<!--              <el-input v-model="saveDialog.job_address" placeholder="请输入岗位城市(如: 杭州)" maxlength="20"/>-->
              <el-cascader
                v-model="saveDialog.job_address"
                placeholder="选择公司地址"
                :options="countryVersion2"
                filterable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位类型" prop="job_type">
              <el-select v-model="saveDialog.job_type" placeholder="请选择岗位类型" clearable>
                <el-option label="全职" value="全职"></el-option>
                <el-option label="兼职" value="兼职"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学历要求" prop="job_education">
              <el-select v-model="saveDialog.job_education" placeholder="请选择学历要求" clearable>
                <el-option v-for="education in degreeOptions" :key="education.label"
                           :label="education.label" :value="education.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招聘状态" prop="job_status">
              <el-select v-model="saveDialog.job_status" placeholder="请选择招聘状态" clearable>
                <el-option label="招聘中" value="招聘中"></el-option>
                <el-option label="停止招聘" value="停止招聘"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经验要求" prop="job_experience">
              <el-select v-model="saveDialog.job_experience">
                <el-option v-for="experience in experienceOptions" :value="experience.value" :label="experience.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位福利" prop="job_welfare">
              <el-input type="textarea" v-model="saveDialog.job_welfare" resize="none"
                        :autosize="{ minRows: 3, maxRows: 3 }" maxlength="100" show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位描述" prop="job_description">
              <el-input type="textarea" v-model="saveDialog.job_description" resize="none"
                        :autosize="{ minRows: 5, maxRows: 5 }" maxlength="255" show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位责任" prop="job_responsibility">
              <el-input type="textarea" v-model="saveDialog.job_responsibility" resize="none"
                        :autosize="{ minRows: 5, maxRows: 5 }" maxlength="255" show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="附属公司" prop="companyId">
              <el-select v-model="saveDialog.companyId" filterable placeholder="请选择" clearable
                         @change="blurSelect"
              >
                <el-option v-for="company in companyList" :key="company.id" :label="company.company"
                           :value="company.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-button type="info" plain icon="el-icon-message" @click="handleCheck"
                         :disabled="companyInformationDialogVisible"
              >查看公司信息
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditDialogClose">取 消</el-button>
        <el-button type="primary" @click="handleUpdate">修 改</el-button>
      </div>
      <el-dialog width="590px" title="公司信息" :visible.sync="innerVisible" append-to-body :before-close="innerClose">
        <el-descriptions direction="vertical" :column="4" border v-loading="innerLoading">
          <el-descriptions-item label="公司名">{{ companyInfo.company }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ companyInfo.principal }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ companyInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="联系邮箱">{{ companyInfo.email }}</el-descriptions-item>
          <el-descriptions-item label="公司规模">{{ companyInfo.scale }}</el-descriptions-item>
          <el-descriptions-item label="入驻时间">{{ companyInfo.start_time }}</el-descriptions-item>
          <el-descriptions-item label="联系地址">{{ companyInfo.address }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </el-dialog>

    <el-dialog :visible.sync="careersDetails" width="700px">
      <el-table :data="careers" height="600">
        <el-table-column label="岗位详情" align="center">
          <template slot-scope="scope">
            <el-descriptions :title="scope.row.job_name" :column="3" border>
              <el-descriptions-item label="学历要求">{{ scope.row.job_education }}</el-descriptions-item>
              <el-descriptions-item label="岗位要求">{{ scope.row.job_experience }}</el-descriptions-item>
              <el-descriptions-item label="岗位薪资">{{ scope.row.job_price }}</el-descriptions-item>
              <el-descriptions-item label="工作地">{{ scope.row.job_address }}</el-descriptions-item>
              <el-descriptions-item label="岗位类型">{{ scope.row.job_type }}</el-descriptions-item>
              <el-descriptions-item label="岗位状态">{{ scope.row.job_status }}</el-descriptions-item>
              <el-descriptions-item label="工作福利" :span="3">{{ scope.row.job_welfare }}</el-descriptions-item>
              <el-descriptions-item label="岗位描述" :span="3">{{
                  scope.row.job_description
                }}
              </el-descriptions-item>
              <el-descriptions-item label="岗位责任" :span="3">{{
                  scope.row.job_responsibility
                }}
              </el-descriptions-item>
              <el-descriptions-item label="附属公司">{{ scope.row.company }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ scope.row.phone }}</el-descriptions-item>
              <el-descriptions-item label="联系邮箱">{{ scope.row.email }}</el-descriptions-item>
              <el-descriptions-item label="负责人">{{ scope.row.principal }}</el-descriptions-item>
              <el-descriptions-item label="开创时间" :span="2">{{ scope.row.start_time }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
  name: 'CareerList',
  data() {
    return {
      // 遮罩
      loading: false,
      innerLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      dialogFormVisible: false,
      editDialogFormVisible: false,
      innerVisible: false,
      companyInformationDialogVisible: true,
      careersDetails: false,
      companyInfo: {},
      careers: [],
      // 新增dialog
      saveDialog: {
        job_name: '',
        job_price: '',
        job_address: '',
        job_type: '',
        job_education: '',
        job_status: '',
        job_experience: '',
        job_welfare: '',
        job_description: '',
        job_responsibility: '',
        companyId: ''
      },
      degreeOptions: [{
        value: '硕士',
        label: '硕士'
      }, {
        value: '本科',
        label: '本科'
      }, {
        value: '专科',
        label: '专科'
      }, {
        value: '无要求',
        label: '无要求'
      }],
      experienceOptions: [{
        value: "在校生",
        label: "在校生"
      },{
        value: "应届生",
        label: "应届生"
      },{
        value: "经验不限",
        label: "经验不限"
      },{
        value: "1年以内",
        label: "1年以内"
      },{
        value: "1-3年",
        label: "1-3年"
      },{
        value: "3-5年",
        label: "3-5年"
      },{
        value: "5-10年",
        label: "5-10年"
      },{
        value: "10年以上",
        label: "10年以上"
      }],
      statusOptions: [{
        value: '招聘中',
        label: '招聘中'
      }, {
        value: '停止招聘',
        label: '停止招聘'
      }],
      typeOptions: [{
        value: '全职',
        label: '全职'
      }, {
        value: '兼职',
        label: '兼职'
      }],
      likeQuery: {
        job_name: '',
        job_price_up: '',
        job_price_down: '',
        job_address: '',
        job_education: '',
        job_type: '',
        job_status: '',
        company: '',
        start_time: [],
        size: 12,
        currentPage: 1
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 表单校验
      rules: {
        job_name: [
          { required: true, message: '岗位名称不能为空', trigger: ['blur', 'change'] },
          { min: 2, max: 20, message: '岗位名称长度必须介于 2 和 20 之间', trigger: ['blur', 'change'] }
        ],
        job_price: [
          { required: true, message: '岗位薪资不能为空', trigger: ['blur', 'change'] },
          { min: 2, max: 15, message: '岗位薪资长度必须介于 2 和 15 之间', trigger: ['blur', 'change'] }
        ],
        job_address: [
          { required: true, message: '岗位地址不能为空', trigger: ['blur', 'change'] },
        ],
        job_type: [
          { required: true, message: '岗位类型不能为空', trigger: ['blur', 'change'] }
        ],
        job_education: [
          { required: true, message: '学历要求不能为空', trigger: ['blur', 'change'] }
        ],
        job_status: [
          { required: true, message: '岗位状态不能为空', trigger: ['blur', 'change'] }
        ],
        job_experience: [
          { required: true, message: '岗位要求不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 100, message: '岗位要求长度必须介于 1 和 100 之间', trigger: ['blur', 'change'] }
        ],
        job_welfare: [
          { required: true, message: '岗位福利不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 100, message: '岗位福利长度必须介于 1 和 100 之间', trigger: ['blur', 'change'] }
        ],
        job_description: [
          { required: true, message: '岗位描述不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 255, message: '岗位描述长度必须介于 1 和 255 之间', trigger: ['blur', 'change'] }
        ],
        job_responsibility: [
          { required: true, message: '岗位责任不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 255, message: '岗位责任长度必须介于 1 和 255 之间', trigger: ['blur', 'change'] }
        ],
        companyId: [
          { required: true, message: '附属公司不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {
    this.getList()
  },
  computed: {
    ...mapGetters(['careerList', 'companyList', 'careerTotal', 'countryVersion2']),
    tableHeight() {
      return 611
    }
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    async getList() {
      this.loading = true
      await this.$store.dispatch('company/getAllCompany')
      await this.$store.dispatch('career/likeQuery', this.likeQuery)
        .then(resp => {
        })
        .catch(error => this.$message.error(error))
        .finally(() => {
          setTimeout(() => {
            this.loading = false
            // this.$message.success('岗位刷新成功！')
          }, 500)
        })
    },
    handleDetails(id) {
      this.careers = []
      if (id instanceof PointerEvent) {
        // 多选处理
        this.ids.forEach(id => this.careers.push({ ...this.careerList.find(career => career.id === id) }))
        this.careersDetails = true
      } else {
        // 单条数据处理
        this.careers.push({ ...this.careerList.find(career => career.id === id) })
        this.careersDetails = true
      }
    },
    handleQuery() {
      this.getList()
    },
    resetQuery() {
      this.likeQuery = {
        job_name: '',
        job_price_up: '',
        job_price_down: '',
        job_address: '',
        job_education: '',
        job_type: '',
        job_status: '',
        company: '',
        start_time: [],
        size: this.likeQuery.size,
        currentPage: 1
      }
      this.getList()
    },
    handleSizeChange(val) {
      this.likeQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.likeQuery.currentPage = val
      this.getList()
    },
    handleSave() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.handleContinueSave()
          this.dialogFormVisible = false
        }
      })
    },
    handleContinueSave() {
      let address = ''
      this.saveDialog.job_address.forEach(country => address += country)
      this.saveDialog.job_address = address
        this.$refs['form'].validate(valid => {
        if (valid) {
          this.$store.dispatch('career/saveCareer', this.saveDialog)
            .then(resp => {
              if (resp) {
                this.$message.success('添加岗位成功')
                this.$refs.form.resetFields()
                this.saveDialog = {
                  job_name: '',
                  job_price: '',
                  job_address: '',
                  job_type: '',
                  job_education: '',
                  job_status: '',
                  job_experience: '',
                  job_welfare: '',
                  job_description: '',
                  job_responsibility: '',
                  company_id: ''
                }
              } else {
                this.$message.error('添加岗位失败 请联系管理员')
                this.$refs.form.resetFields()
                this.saveDialog = {
                  job_name: '',
                  job_price: '',
                  job_address: '',
                  job_type: '',
                  job_education: '',
                  job_status: '',
                  job_experience: '',
                  job_welfare: '',
                  job_description: '',
                  job_responsibility: '',
                  company_id: ''
                }
              }
            }).finally(() => this.getList())
        }
      })
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.clearState()
        })
        .catch(_ => {
        })
    },
    handleEditDialogClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$refs.editForm.resetFields()
          this.editDialogFormVisible = false
          this.saveDialog = {
            job_name: '',
            job_price: '',
            job_address: '',
            job_type: '',
            job_education: '',
            job_status: '',
            job_experience: '',
            job_welfare: '',
            job_description: '',
            job_responsibility: '',
            company_id: ''
          }
        })
        .catch(_ => {
        })
    },
    clearState() {
      this.$refs.form.resetFields()
      this.dialogFormVisible = false
      this.saveDialog = {
        job_name: '',
        job_price: '',
        job_address: '',
        job_type: '',
        job_education: '',
        job_status: '',
        job_experience: '',
        job_welfare: '',
        job_description: '',
        job_responsibility: '',
        company_id: ''
      }
    },
    innerClose() {
      this.companyInfo = {}
      this.innerVisible = false
    },
    handleCheck() {
      this.innerVisible = true
      this.innerLoading = true
      this.$store.dispatch('company/getCompanyInfoById', this.saveDialog.companyId)
        .then((resp) => this.companyInfo = resp)
        .finally(() => setTimeout(() => this.innerLoading = false, 800))
    },
    handleDelete(event, id) {
      if (id === undefined) {
        this.$confirm('此操作将永久删除这些岗位，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          // 确定事件
          this.$store.dispatch('career/deleteCareersByIds', { 'ids': this.ids })
            .then(resp => {
              if (resp) {
                this.$message.success('岗位删除成功! ')
              } else {
                this.$message.error('岗位删除失败，请联系管理员')
              }
            })
            .catch(error => this.$message.error(error))
            .finally(() => this.getList())
        }).catch(() => {
          // 取消事件
          console.log('cancel')
        })
      } else {
        this.$confirm('此操作将永久删除这些岗位，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          // 确定事件
          this.ids.push(id)
          this.$store.dispatch('career/deleteCareersByIds', { 'ids': this.ids })
            .then(resp => {
              if (resp) {
                this.$message.success('岗位删除成功! ')
              } else {
                this.$message.error('岗位删除失败，请联系管理员')
              }
            })
            .catch((error) => this.$message.error(error))
            .finally(() => {
              this.ids = this.ids.filter(item => item !== id)
              this.getList()
            })
        }).catch(() => {
          // 取消事件
        })
      }
    },
    openEditDialogFaction(id) {
      if (id instanceof PointerEvent) {
        this.$store.dispatch('career/getCareerInfoById', this.ids[0])
          .then(resp => {
            this.saveDialog = resp
            this.editDialogFormVisible = true
            this.companyInformationDialogVisible = false
            this.saveDialog.job_address = resp.job_address.match(/.+?(省|市|自治区|自治州|县|区)/g)
          })
      } else {
        this.$store.dispatch('career/getCareerInfoById', id)
          .then(resp => {
            this.saveDialog = resp
            this.editDialogFormVisible = true
            this.companyInformationDialogVisible = false
          })
      }
    },
    handleUpdate() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let address = ''
          this.saveDialog.job_address.forEach(country => address += country)
          this.saveDialog.job_address = address
          this.$store.dispatch('career/editCareerInfoById', this.saveDialog)
            .then(resp => {
              if (resp) {
                this.$message.success('修改岗位信息成功')
                this.$refs.editForm.resetFields()
                this.editDialogFormVisible = false
                this.saveDialog = {
                  job_name: '',
                  job_price: '',
                  job_address: '',
                  job_type: '',
                  job_education: '',
                  job_status: '',
                  job_experience: '',
                  job_welfare: '',
                  job_description: '',
                  job_responsibility: '',
                  company_id: ''
                }
              } else {
                this.$message.error('修改岗位信息失败 请联系管理员')
              }
            }).finally(() => this.getList())
        }
      })
    },
    blurSelect() {
      this.companyInformationDialogVisible = !this.saveDialog.companyId
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.job_status === '停止招聘') {
        return 'error-row'
      }
      return ''
    }
  }
}

</script>

<style lang="css" scoped>
.likeQueryOpinion {
  color: #666;
  font-weight: bold;
}

.likeQueryOpinion .input {
  width: 200px;
}

.pageRow {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.error-row {
  background: #c74b25;
}
</style>
